<template>
    <div class="login-wrapper">
        <div class="login-container">
            <div style="padding: 0px 20px;">
                <h3 class="title">网测必胜题库</h3>
                <h4 style="margin-bottom: 20px; text-align: center; color: rgb(204, 204, 204);">可能是最完美的四大笔试解决方案</h4>
                <el-form ref="form" :model="formData" :rules="rules" label-width="0">
                    <!-- 手机号 -->
                    <el-form-item prop="phone">
                        <el-input v-model="formData.phone" type="text" placeholder="请输入手机号或邮箱">
                            <span slot="prepend" class="svg-container">
                                <svg aria-hidden="true" class="svg-icon">
                                    <use xlink:href="#icon-user">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130 130" id="icon-user"><path d="M63.444 64.996c20.633 0 37.359-14.308 37.359-31.953 0-17.649-16.726-31.952-37.359-31.952-20.631 0-37.36 14.303-37.358 31.952 0 17.645 16.727 31.953 37.359 31.953zM80.57 75.65H49.434c-26.652 0-48.26 18.477-48.26 41.27v2.664c0 9.316 21.608 9.325 48.26 9.325H80.57c26.649 0 48.256-.344 48.256-9.325v-2.663c0-22.794-21.605-41.271-48.256-41.271z" stroke="#979797"></path></svg>
                                    </use>
                                </svg>
                            </span>
                        </el-input>
                    </el-form-item>
                    <!-- 密码 -->
                    <el-form-item prop="password">
                        <el-input :type="pwdInputType" v-model="formData.password" placeholder="请输入密码">
                            <span slot="prepend" class="svg-container">
                                <svg aria-hidden="true" class="svg-icon">
                                    <use xlink:href="#icon-password">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" id="icon-password"><path d="M108.8 44.322H89.6v-5.36c0-9.04-3.308-24.163-25.6-24.163-23.145 0-25.6 16.881-25.6 24.162v5.361H19.2v-5.36C19.2 15.281 36.798 0 64 0c27.202 0 44.8 15.281 44.8 38.961v5.361zm-32 39.356c0-5.44-5.763-9.832-12.8-9.832-7.037 0-12.8 4.392-12.8 9.832 0 3.682 2.567 6.808 6.407 8.477v11.205c0 2.718 2.875 4.962 6.4 4.962 3.524 0 6.4-2.244 6.4-4.962V92.155c3.833-1.669 6.393-4.795 6.393-8.477zM128 64v49.201c0 8.158-8.645 14.799-19.2 14.799H19.2C8.651 128 0 121.359 0 113.201V64c0-8.153 8.645-14.799 19.2-14.799h89.6c10.555 0 19.2 6.646 19.2 14.799z"></path></svg>
                                    </use>
                                </svg>
                            </span>
                            <span @click="togglePwd" slot="append" class="svg-container" style="cursor:pointer;">
                                <svg data-v-22425877="" aria-hidden="true" class="svg-icon">
                                    <use data-v-22425877="" xlink:href="#icon-eye">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 64" id="icon-eye"><path d="M127.072 7.994c1.37-2.208.914-5.152-.914-6.87-2.056-1.717-4.797-1.226-6.396.982-.229.245-25.586 32.382-55.74 32.382-29.24 0-55.74-32.382-55.968-32.627-1.6-1.963-4.57-2.208-6.397-.49C-.17 3.086-.399 6.275 1.2 8.238c.457.736 5.94 7.36 14.62 14.72L4.17 35.96c-1.828 1.963-1.6 5.152.228 6.87.457.98 1.6 1.471 2.742 1.471s2.284-.49 3.198-1.472l12.564-13.983c5.94 4.416 13.021 8.587 20.788 11.53l-4.797 17.418c-.685 2.699.686 5.397 3.198 6.133h1.37c2.057 0 3.884-1.472 4.341-3.68L52.6 42.83c3.655.736 7.538 1.227 11.422 1.227 3.883 0 7.767-.49 11.422-1.227l4.797 17.173c.457 2.208 2.513 3.68 4.34 3.68.457 0 .914 0 1.143-.246 2.513-.736 3.883-3.434 3.198-6.133l-4.797-17.172c7.767-2.944 14.848-7.114 20.788-11.53l12.336 13.738c.913.981 2.056 1.472 3.198 1.472s2.284-.49 3.198-1.472c1.828-1.963 1.828-4.906.228-6.87l-11.65-13.001c9.366-7.36 14.849-14.474 14.849-14.474z"></path></svg>
                                    </use>
                                </svg>
                            </span>
                        </el-input>
                    </el-form-item>
                    <div class="clearfix" style="float: right; margin-top: -10px; margin-bottom: 10px; margin-right: 20px;"><router-link tag="a" to="/passport/forget">忘记密码</router-link></div>
                    <!-- 游客 -->
                    <el-row class="visitor">
                        <el-col>
                            <el-button @click="visitorExp" type="primary">游客体验(免费体验)</el-button>
                        </el-col>
                    </el-row>
                    <!-- 登录 -->
                    <el-row class="login">
                        <el-col>
                            <el-button @click="checkForm" type="primary">登录</el-button>
                            <router-link tag="el-button" type="default" to="/passport/register">注册</router-link>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
        <div class="desc-bottom"><p><span class="label">DDT：</span> <span class="content">
            综合能力（General Ability）提供刷题模式和模拟模式。赠送VI原题、范文和性格测试。
        </span></p> <p><span class="label">KPMG：</span> <span class="content">
            2020年刚变GBA,针对10个小游戏中7个游戏提供手机端模拟练习，2个有标准答案部分直接搜索。其他几个部分给出高分攻略。
        </span></p> <p><span class="label">PwC：</span> <span class="content">
            11个小游戏中7个考手速游出戏给网页版模拟供练习，2个标准答案部分直接搜索。其他几个部分给出高分攻略。
        </span></p> <br> <p><span class="label2">购买方式：</span> <span class="content2">
            用大陆手机号注册后直接在网站用微信支付即可。
        </span></p> <p><span class="label2">邀请码：</span> <span class="content2">
            每位注册用户都有专属邀请码。好友购买时填写您的邀请码，返现10%，好友也将获得一张5元优惠券。
        </span></p> <p><span class="label2">游客模式：</span> <span class="content2">
            我们是全网唯一一家给出刷题系统、模拟系统、模拟游戏等解决方案的商家。客户们可能无法理解，因而提供了游客模式供客户们了解。<span class="em">每个题型显示6题，付费后会显示全部</span>。
        </span></p> <p><span class="label2">新题返现：</span> <span class="content2">
            有任何新题(必须清晰截图)，可直接在网站上对应入口反馈，确认无误立即返现，<span class="em">10元/题</span>。
        </span></p> <p style="line-height: 30px;"><span class="label2" style="font-size: 20px;">考试最强助攻：</span> <span class="content2" style="font-size: 18px;">
            请联系微信13186818552，最低价，最靠谱，最高分
        </span></p> <p>
        商务合作、校园代理请联系微信13186818552
        </p></div>
    </div>
</template>

<script>
export default{
    name:'login',
    data:()=>({
        pwdInputType:'password',
        formData: {
            phone:'',
            password:''
        },
        rules: {
            phone: [
                { required: true, message: '请输入手机号或邮箱', trigger: 'blur' }
            ],
            password: [
                { required: true, message: '请输入密码', trigger: 'blur' },
                { min: 6, max: 15, message: '密码长度在应在 6 到 5 个字符', trigger: 'blur' }
            ],
        }
    }),
    methods:{
        togglePwd(){
            if(this.pwdInputType=='password'){
                this.pwdInputType='text'
            }else{
                this.pwdInputType='password'
            }
        },
        checkForm() {
            //表单提交
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.login()
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        async login(){
            let params={
                phone:this.formData.phone,
                pwd:this.formData.password
            }
            let {data:{code,data}} = await this.$http.post(this.$api.login,params)
            if(code==200){
                localStorage.setItem('token',data)
                this.$router.replace('/exam/index')
            }
        },
        visitorExp(){
            this.$router.push({
                path:'/exam/index',
                query:{visitor:1}
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.login-container {
    border-radius: 15px;
    margin: 30px auto;
    width: 400px;
    max-width: 95%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #eaeaea;
    -webkit-box-shadow: 0 0 25px #cac6c6;
    box-shadow: 0 0 25px #cac6c6;
    padding-top: 70px;
    color: #333;
    & a{
        cursor: pointer;
        &:hover {
            color: #20a0ff;
        }
    }
    .title {
        font-size: 26px;
        font-weight: 400;
        color: #333;
        margin: 0 auto 10px;
        text-align: center;
        font-weight: 700;
    }
    .svg-container {
        line-height: 30px;
        color: #889aa4;
        vertical-align: middle;
        display: inline-block;
        .svg-icon {
            width: 1em;
            height: 1em;
            vertical-align: -.15em;
            fill: currentColor;
            overflow: hidden;
        }
    }
    .visitor {
        margin-bottom: 20px;
        .el-button{
            width:100%;
        }
    }
    .login {
        padding-bottom: 40px;
        .el-button{
            width:48%;
        }
    }
}
.desc-bottom {
    font-size: 14px;
    line-height: 20px;
    width: 600px;
    max-width: 95%;
    padding: 10px;
    margin: 10px auto;
    & p {
        padding: 0;
        margin: 0 0 5px;
        .label {
            color: #20a0ff;
            font-weight: 700;
        }
        .label2 {
            color: #67c23a;
            font-weight: 700;
        }
        .em {
            color: #f56c6c;
        }
    }
}
</style>
